<!-- 病患分布详情弹窗 -->
<template>
  <div class="PopMemberList-wrap">
    <div class="pop-inner">
      <div class="pop-head">
        <div class="tit">病患情况</div>
        <div class="close" @click="closePanel">×</div>
      </div>
      <div class="pop-body">
        <el-table
            highlight-current-row
            class="customMyElTable"
            :data="datas"
            height="300"
            style="width: 100%;" @row-click="onRowClick" v-if="datas">
          <el-table-column
              type="index" label="序号"
              width="60" align="center">
          </el-table-column>
          <el-table-column
              prop="patientType"
              label="类型"
              width="80" align="center">
            <template slot-scope="scope">
              <div style="color:#ffb81e" v-if="scope.row.patientType === '密切'">{{ scope.row.patientType }}</div>
              <div style="color:#e8643d" v-if="scope.row.patientType === '疑似'">{{ scope.row.patientType }}</div>
              <div style="color:#ff3535" v-if="scope.row.patientType === '确诊'">{{ scope.row.patientType }}</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="patientName"
              label="姓名" align="center">
          </el-table-column>
          <el-table-column
              prop="contactInfo"
              label="联系电话" width="110" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <pop-member-detail :datas="currentDetail" @close-panel="handleClose" v-if="showDetail"></pop-member-detail>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
  import PopMemberDetail from '@/components/common/PopMemberDetail.vue';

  @Component({
    name: 'PopMemberList',
    components: {
      PopMemberDetail,
    },
  })
  export default class PopMemberList extends Vue {
    @Prop({default: () => [{
        id: '1',
        patientType: '密切',
        patientName: '张无忌',
        contactInfo: '15901224483'
      }, {
        id: '2',
        patientType: '疑似',
        patientName: '李晓明',
        contactInfo: '15901224483'
      }, {
        id: '3',
        patientType: '确诊',
        patientName: '刘康数',
        contactInfo: '15901224483'
      }]}) private datas?: any;
    private currentDetail: any = null;
    private showDetail: any = false;
    @Emit('closePop') //
    private closePanel() {
      return false;
    }
    private onRowClick(row: any, column: any, event: any) {
      console.log(row);
      this.showDetail = true;
      this.currentDetail = {
        comeDate: '2020-02-01 00:00:00',
        comeTraffic: '高铁',
        contactInfo: '13871362123',
        identityCard: '42011611111111',
        liveAddress: '安居小区',
        patientAge: '22',
        patientName: '张三',
        patientSex: '男',
        patientType: '疑似',
        school: '',
        takeMeasures: '隔离处理',
        workUnit: '辰X科技',
      }
    }
    private handleClose() {
      this.showDetail = false;
      this.currentDetail = null;
    }
  }
</script>
<style lang="less" scoped>
  .PopMemberList-wrap{
    position: absolute;
    left: 300px;
    bottom: 100px;
    .pop-inner {
      width: 413px;
      height: 414px;
      background: url('../../assets/img/panel/gisUI/pop-inner_bg.png') no-repeat 0 0;
      background-size: 100% 100%;
      padding: 20px;
      .pop-head{
        padding: 17px 15px;
      }
      .pop-body{
        padding: 10px;
        height: calc(100% - 54px);
        .pop-address{
          font-size: 20px;
          color: #8cfffe;
          margin-top: 20px;
        }
        .pop-infos{
          .info-tit{
            font-size: 20px;
            color: #8cfffe;
            margin-top: 20px;
          }
          .infos{
            .item{
              font-size: 18px;
              color: #c2e7f2;
              margin-top: 15px;
              .num{
                font-size: 22px;
                margin-right: 5px;
              }
            }
          }
          .line{
            width: 100%;
            height: 1px;
            background: radial-gradient(#17c7dd 0%,#17c7dd,transparent 95%);
            margin-top: 20px;
          }
        }
      }
    }
  }
</style>
